<template>
  <q-page class="q-pa-md" v-loading="loading">
    <div style="position: relative; ">
      <q-breadcrumbs class="q-mb-md" style="height:50px;line-height: 40px; border-bottom: 1px dashed #ccc;">
        <el-icon style="cursor: pointer;" @click="router.go(-1)">
          <ArrowLeft />
        </el-icon>
        <q-breadcrumbs-el label="模型版本详情" />
      </q-breadcrumbs>

    </div>
    <div class="dataBox">
      <div class="row">
        <div class="col">模型名称：<i>xxx</i></div>
        <div class="col">模型类型：<i>物体检测</i></div>
        <div class="col">创建人：<i>V001</i></div>
      </div>
      <div class="row">
        <div class="col">创建时间：<i>xxx</i></div>
        <div class="col">模型来源：<i>2023-04-18 22:22:22</i></div>
        <div class="col">模型框架：<i>A</i></div>
      </div>
      <div class="row">
        <div class="col">模型版本说明：<i>详细i奥数内容</i></div>
      </div>
    </div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
      style="border-bottom: 1px dashed #ccc;margin-bottom: 20px;">
<!--      <el-menu-item index="1">使用说明</el-menu-item>-->
      <el-menu-item index="1">版本文件</el-menu-item>
      <el-menu-item index="2">评估报告</el-menu-item>
    </el-menu>
<!--    <div class="row" style="min-height: 300px;background: #eee;" v-if="chooseNumber == '1'">-->
<!--      模型使用说明-->
<!--    </div>-->
    <div v-if="chooseNumber == '1'">
      <div class="row"
        style="height: 35px;line-height: 35px;background: #eee;color: #333;padding: 0 5px;text-align: center;">
        <div class="col col-3">名称</div>
        <div class="col">上传日期</div>
        <div class="col">大小</div>
        <div class="col">操作</div>
      </div>
      <div class="dataTree">
        <el-tree :data="dataSource" show-checkbox node-key="id" :default-expand-all="false" :expand-on-click-node="false">
          <template #default="{ data }">
            <div class="row">
              <div class="col col-3">{{ data.label }}</div>
              <div class="col">{{ data.date }}</div>
              <div class="col">{{ data.size }}</div>
              <div class="col">
                <el-button link type="primary" size="small">下载</el-button>
              </div>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="row" v-if="chooseNumber == '2'">
      <div class="col col-2" style="margin-right: 10px;">
        <el-input class="w-50 m-2" placeholder="搜索label名称" style="margin-bottom: 20px;" />
        <el-table :data="tableData" border style="width: 100%;font-size: 14px;"
          :header-cell-style="{ background: '#eee', color: '#333333' }">
          <el-table-column prop="date" label="lable" />
          <el-table-column prop="name" label="score" />
        </el-table>
      </div>
      <div class="col rightBox">
        <div class="titleBox">评估参数 <i>样本数量：300</i></div>
        <div class="row dataBox">
          <div class="col">
            <div>Accuracy</div>
            <div>0.522</div>
          </div>
          <div class="col">
            <div>Accuracy</div>
            <div>0.522</div>
          </div>
          <div class="col">
            <div>Accuracy</div>
            <div>0.522</div>
          </div>
          <div class="col">
            <div>Accuracy</div>
            <div>0.522</div>
          </div>
          <div class="col">
            <div>Accuracy</div>
            <div>0.522</div>
          </div>
          <div class="col">
            <div>Accuracy</div>
            <div>0.522</div>
          </div>
        </div>
        <div class="titleBox" style="margin-top: 10px;">指标报告</div>
        <div class="row">
          <div class="col">
            <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
          </div>
          <div class="col">
            <chart-line :chartOption="chartOption2" :chartSize="chastSize"></chart-line>
          </div>
        </div>
        <div class="titleBox" style="margin-top: 10px;">
          Confusion Matrix
          <el-tooltip class="box-item" effect="light " content="可添加自定义标签以方便后续标注工作" placement="right-start">
            <el-button
              style="transform: scale(.8);transform-origin:left ; margin:0 0 0 10px; font-size: 18px;color: #333;border-color: #333;"
              size="small" circle>?
            </el-button>
          </el-tooltip>
          <el-tooltip class="item"  placement="top">
            <i class="el-icon-question smartTip"></i>
            <div style="width: 200px;" slot:any="content">创建创意时从视频中自动抽取多帧图片优选生成封面，
              本方案无需手动上传图片</div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </q-page>
</template>


<script setup lang="ts">
import { reduce, size } from "lodash";
import { reactive, ref } from "vue";
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { getDatasetDetail } from 'src/api/dataset'
import chartLine from 'src/components/chartLine.vue';
const router = useRouter()
const projectId = router.currentRoute.value.params.project_id
const activeIndex = ref('2')
let chooseNumber = ref('1')
const loading = ref(true)
const handleSelect = (key: string, keyPath: string[]) => {
  chooseNumber.value = key
}
const chastSize = reactive({
  width: '90%',
  height: "273px"
})
const chartOption2 = reactive({
  tooltip: {
    axisPointer: {
      type: 'shadow',
      crossStyle: {
        color: '#fff'
      }
    },
    trigger: 'axis',
  },
  grid: {
    left: '1%',
    right: '1%',
    bottom: '5%',
    top: '8%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['0%', '25%', '50%', '75%', '100%']
  },
  yAxis: {
    type: 'value',
    max: 100
  },
  series: [
    {
      name: 'GPU',
      data: [20, 30, 50, 80, 30, 40, 65],
      color: 'rgb(108,174,235)',
      type: 'line',
      smooth: true,
      areaStyle: {
      }
    }
  ]
})
const tableData = [
  {
    date: 'dog',
    name: '0.7'
  },
  {
    date: 'cat',
    name: '0.4'
  },
  {
    date: 'pig',
    name: '0.56'
  },
  {
    date: 'monkey',
    name: '0.96'
  },
]
const dataSource = ref([
  {
    id: 1,
    label: '显示文件夹名称',
    date: '2023-04-18 22:33:11',
    size: '12k',
    children: [
      {
        id: 4,
        label: '显示文件名称',
        date: '2023-04-18 22:33:11',
        size: '12k',
      },
      {
        id: 5,
        label: '显示文件名称',
        date: '2023-04-18 22:33:11',
        size: '12k',
      },
    ],
  },
  {
    id: 2,
    label: '项目文件夹',
    date: '2023-04-18 22:33:11',
    size: '12k',
    children: [
      {
        id: 7,
        label: '1.xtx',
        date: '2023-04-18 22:33:11',
        size: '12k',
      },
      {
        id: 8,
        label: '233.txt',
        date: '2023-04-18 22:33:11',
        size: '12k',
      },
    ],
  }
])

getData()
function getData() {
  loading.value = false
  // getDatasetDetail(projectId,12).then((res: any) => {
  //   console.log(res.data)

  // }).finally(() => {
  //   loading.value = false
  // })
}
</script>

<style lang="scss" scoped>
.dataBox {
  .row {
    margin-bottom: 10px;

    i {
      font-style: initial;
      color: #333333;
    }
  }
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 10px 0 -10px;
}

.successDot {
  background: #1FB62F;
}

.errorDot {
  background: #E6376E;
}

.dataTree {
  .row {
    width: 100%;

    .col {
      text-align: center;

      &:nth-child(1) {
        text-align: left;
        text-indent: 0;
      }

      &:nth-child(2) {
        text-indent: -43px;
      }

      &:nth-child(3) {
        text-indent: -35px;
      }

      &:nth-child(4) {
        text-indent: -18px;
      }
    }

  }

  &::v-deep .el-tree-node__children {
    .col {
      &:nth-child(1) {
        width: calc(25% - 14px);
      }
    }
  }
}

.rightBox {
  text-align: center;
  color: #333;

  .titleBox {
    text-align: left;
    font-weight: bold;
    margin-bottom: 10px;

    i {
      margin-left: 10px;
      font-size: 12px;
      font-style: initial;
      font-weight: initial;
    }
  }

  .dataBox {
    background: #DCE7FB;
    padding: 10px 0;

    .col {
      div {
        &:nth-child(1) {
          font-size: 12px;
          color: #9A9A9A;
        }

        &:nth-child(2) {
          font-size: 16px;
          color: #333;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
